<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="任务类名" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="queryParam.jobClassName"  placeholder="请输入任务类名" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="任务状态" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select v-model="queryParam.status" placeholder="请选择状态">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="RUNNING">已启动</a-select-option>
                <a-select-option value="PAUSE">已暂停</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" icon="search" @click="searchQuery()">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset()">重置</a-button>
              <a style="margin-left: 8px" @click="handleToggleSearch">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <vxe-grid
      id="QuartzJobList"
      ref="vxeTable"
      :height="height"
      v-bind="gridOptions"
      v-on="listeners"
    >
      <template #status="{ row }">
        <a-tag v-if="row.status === 'RUNNING'" color="green">已启动</a-tag>
        <a-tag v-else color="orange">已暂停</a-tag>
      </template>
      <template #action="{ row }">
        <a @click="handleEdit(row)" >编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
          <a-menu slot="overlay">
            <a-menu-item v-if="row.status === 'PAUSE'">
              <a @click="handleRun(row.id)">启动</a>
            </a-menu-item>
            <a-menu-item v-else>
              <a @click="handlePause(row.id)">暂停</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </vxe-grid>
    <!-- 表单区域 -->
    <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
  </a-card>
</template>

<script>
import QuartzJobModal from './modules/QuartzJobModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { postAction, deleteAction } from '@/services/manage'
export default {
  name: 'QuartzJobList',
  mixins: [VxeTableListMixin],
  components: {
    QuartzJobModal
  },
  data() {
    return {
      description: '定时任务在线管理',
      columns: [
        // { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '任务类名', field: 'jobClassName' },
        { title: 'cron表达式', field: 'jobCron' },
        { title: '参数', field: 'jobParams' },
        { title: '描述', field: 'desc' },
        { title: '状态', field: 'status', slots: { default: 'status' }},
        { title: '操作', slots: { default: 'action' }, width: 120 }
      ],
      url: {
        list: '/quartz/page',
        delete: '/quartz/delete/',
        deleteBatch: '/quartz/delete/',
        pause: '/quartz/pause/',
        run: '/quartz/run/',
        exportXlsUrl: 'quartzJob/exportXls',
        importExcelUrl: 'quartzJob/importExcel'
      },
      toolbarConfig: {
        buttons: [
          { buttonRender: { name: 'VxeToolbarAdd', events: { click: this.handleAdd }}}
        ]
      }
    }
  },
  methods: {
    handlePause(id) {
      // 暂停定时任务
      this.$confirm({
        title: '确认暂停',
        content: '是否暂停选中任务?',
        onOk: () => {
          postAction(this.url.pause + id).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.loadData()
            }
          })
        }
      })
    },
    handleRun(id) {
      // 恢复定时任务
      this.$confirm({
        title: '确认启动',
        content: '是否启动选中任务?',
        onOk: () => {
          postAction(this.url.run + id).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.loadData()
            }
          })
        }
      })
    },
    async handleDelete(id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      if (typeof this.deleteBefore === 'function') {
        // 批量删除之前执行判断，是否能删除,支持异步
        const message = await this.deleteBefore()
        if (message) {
          return this.$message.warning(message)
        }
      }
      this.$message.loading('删除中', 0)
      deleteAction(`${this.url.delete}${id}`).then((res) => {
        this.$message.destroy()
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        }
      })
    }
  }
}
</script>
